<template>
    <div class="level">
        <div class="content">
            <div class="left">{{ title }}：</div>
            <ul>
                <li v-if="title == '等级'" @click="changeLevel('')" :class="{ active: flag == '' }">全部</li>
                <li v-else @click="changeRegion('')" :class="{ active: flag == '' }">全部</li>
                <li v-if="title == '等级'" :class="{ active: flag == item.value }" @click="changeLevel(item.value)"
                    v-for="item in dict" :key="item.value">{{ item.name }}</li>
                <li v-else :class="{ active: flag == item1.value }" @click="changeRegion(item1.value)"
                    v-for="item1 in dict" :key="item1.value">{{ item1.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineProps(['dict', 'title'])

let flag = ref<string>('')
let $emit = defineEmits(['getLevel', 'getRegion'])
const changeLevel = (value: string) => {
    flag.value = value
    $emit('getLevel', value)
}
const changeRegion = (value: string) => {
    flag.value = value
    $emit('getRegion', value)
}
</script>

<style scoped lang="scss">
.level {
    color: #7f7f7f;
    white-space: nowrap;
    margin-bottom: 10px;

    .content {
        display: flex;

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                margin: 0 0 10px 10px;

                &.active {
                    color: #55a6fe;
                }

                &:hover {
                    color: #55a6fe;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>